<template id="actRankingPopup">
    <!--排行榜查看更多弹框-->
    <div id="sortAlertV1" class="prize-check-more-alert">
        <div id="checkMore" class="alert-wrap">
            <div class="prize-step-resore-wrap">
                <img class="pas1-title-img" v-if="pageObjDefault.headerImg" v-lazy="staticImageUrl(pageObjDefault.headerImg)" alt=""/>
                <img v-else class="prize-step-resore" :src="staticImageUrl('images/sort_title.png')" alt=""/>
                <span class="prize-step-resore-title">{{pageObjDefault.bordTile}}</span>
            </div>
            <!--<span class="ranking-username">{{'avvavv'.slice(0,1)}}<span v-if="'avvavv'.length == 3">*</span><span v-if="'avvavv'.length > 3">{{'avvavv'.slice(1,2)}}</span>{{'avvavv'.slice(2,3)}}<span v-if="'avvavv'.length > 3">***</span></span>-->
            <div class="wempty-list" v-if="Object.keys(pageObjDefault.newOrders).length == 0">
                <div>
                    <img class="pas1-title-img" v-if="pageObjDefault.noRankimgImg" v-lazy="staticImageUrl(pageObjDefault.noRankimgImg)" alt=""/>
                    <img class="empty-list-img" v-lazy="staticImageUrl('images/no_sort.png')" alt=""/>
                    <p class="empty-list-text">{{pageObjDefault.noRankimgText}}</p>
                </div>
            </div>
            <ul class="ranking-list-wrap" v-else-if="Object.keys(pageObjDefault.newOrders).length > 0">
                <li class="ranking-list" v-for="(n,index) in pageObjDefault.newOrders">
                <span class="ranking-list-msg">
                    <span class="ranking-cricle-wrap">
                        <img class="ranking-cricle" :src="'images/prize_no1.png' | imagesPath" alt="" v-if="index == 0"/>
                        <img class="ranking-cricle" v-if="index == 1" :src="'images/prize_no2.png' | imagesPath" alt=""/>
                        <img class="ranking-cricle" v-if="index == 2" :src="'images/prize_no3.png' | imagesPath" alt=""/>
                        <span class="ranking-numb" v-if="index != 0 && index != 1 && index!= 2">{{ index +1 }}</span>
                    </span>
                    <img class="ranking_user_touxiang ranking-user-photo ranking-teamer-img"
                         :src="n.ownerIcon" alt=""/>
                    <span class="ranking-username">{{n.ownerName | nameFilter}}</span>
                </span>
                <span class="ranking-get-discount" v-if="n.finishTime"> {{n.finishTime | timeFilter}}{{pageObjDefault.finishText}}</span>
                <span class="ranking-get-discount" v-else>{{pageObjDefault.finishText}}</span>
                </li>
                <li v-if="pageObjDefault.hasMore" class="pa-more" @click="$emit('nextPage');isMore()">
                    查看更多<span class='iconfont icon-youjiantou1'></span>
                </li>
            </ul>
            <img src="http://192.168.1.127/html/v_nw_h5_min/images/close_icon_border.png"  @click="$emit('closeSort')" alt="" class="rpfr-close-btn">
        </div>
        <v-bord>
            <div slot="cantClick"  @click="$emit('closeSort')" class="com_black"></div>
        </v-bord>
    </div>
</template>
<script>

    import $ from 'jquery'
    import {formatDate} from '../../../../../../../static/js/common'
    import xurl from '../../../../../../x/xurl'

    export default {
        name: 'sortAlertV1',
        props: {
            pageObj:{
                type:Object
            }
        },
        data() {
            return {
                pageObjDefault:{
                    headerImg:'',
                    noRankimgImg:'',
                    noRankimgText:'暂无排名',
                    bordTile:'排行榜',
                    newOrders:[],
                    hasMore:false,
                    finishText:'购买成功'
                },
            }
        },
        mounted(){
            this.pageObjDefault = Object.assign(this.pageObjDefault,this.pageObj);
            // console.log("hasMore:"+this.pageObjDefault.hasMore)
           // this.queryGroupsByRankId(this.actInfo.actId,1);
        },
        methods:{
            isMore(){
                setTimeout(()=>{
                    this.pageObjDefault = Object.assign(this.pageObjDefault,this.pageObj);
                },50)
            }
        },
        filters: {
            nameFilter: function (name) {
                if (name.length < 2) {
                    return name;
                }
                return name.substr(0, 2).concat("**");
            },
            timeFilter: function (time) {
                let date = new Date(time);
                return formatDate(date, "yyyy年dd日hh:mm");
            }
        },
        // watch:{
        //     pageObj: {
        //         handler (val){
        //             this.pageObjDefault = Object.assign(this.pageObjDefault,val);
        //         },
        //         deep:true
        //     }
        // },
        components:{
            'v-bord':()=>import('../../../../../commonComponents/alert/Bord')
        },
    }

</script>
<style scoped lang="scss">
    @import url($css_root + 'css/alert.css');
    @import url($css_root + 'css/top.css');

    $styleColor: #F05656;
    //排行榜和好友助力榜
    .prize-check-more-alert {

        .ranking-list-msg {
            color: $styleColor;
        }

        .pfrd-ellipsis {
            margin-left: .05rem;
        }

        .ranking-get-discount {
            white-space: nowrap;
        }

        .ranking-username {
            color: $styleColor;
            display: inline-block;
            font-size: .12rem;
            max-width: .36rem;
            overflow: inherit;
            white-space: nowrap;
        }

        .prize-step-resore {
            position: relative;
            left: 0;
            width: 100%;
        }

        .ranking-cricle-wrap {
            width: .3rem;
            white-space: nowrap;
        }

        .ranking-cricle {
            display: inline-block;
            height: .2rem;
        }

        .ranking-list {
            padding-left: .1rem;
            padding-right: .1rem;
        }


        .ranking-numb {
            color: #ffc892;
            font-size: .12rem;
            text-align: center;
            display: table-cell;
            top: .03rem;
            white-space: nowrap;
        }

        .ranking_user_touxiang {
            width: .6rem;
            height: .6rem;
            margin-left: .05rem;
            border: 1px solid #afafaf;
            box-sizing: border-box;
            border-radius: 50%;
        }

        .ranking-user-photo {
            width: .45rem;
            height: .45rem;
            margin-right: 9px;
            border-radius: 25px;
        }

        .ranking-teamer-img {
            border-color: #fe6c64;
            padding: 2px;
        }
    }
    .rpfr-close-btn{
        position: absolute;
        bottom: -.8rem;
        width: .44rem;
        height: .44rem;
        left: 0;
        right: 0;
        margin: auto;
    }
    .prize-check-more-alert {
        .prize-step-resore{
            position: relative;
            left: 0;
            display: block;
            width: 1.61rem;
            right: 0;
            margin: auto;
        }
        .prize-step-resore-title{
            font-size: .17rem;
            position: absolute;
            color: #F05656;
            left: 50%;
            transform: translateX(-50%);
            margin: auto;
            font-weight: bold;
            top: 60%;
        }
        .alert-wrap {
            max-height: 4.8rem;
            border-radius: 10px;
            width: 90%;
        }
        .prize-step-resore-wrap{
            position: absolute;
            left: -.07rem;
            width: 100%;
            top: -.55rem;
        }
    }
    .ranking-list-wrap{
        margin-top: .2rem;
        overflow: auto;
        max-height: 4.6rem;
        letter-spacing: normal;
        padding-bottom: .5rem;
    }
    .wempty-list{
        padding-top: .3rem;
        padding-bottom: .2rem;
    }
    .pa-more{
        color: #F05656;
        font-size: .12rem;
        .icon-youjiantou1{
            color: #F05656;
        }
    }
    .empty-list-img {
        width: 1rem;
        height: 1rem;
        display: block;
        margin: auto;
        position: relative; }
    .empty-list-text {
        width: 100%;
        font-size: .14rem;
        text-align: center;
        margin-top: .1rem;
        margin-bottom: .1rem; }
</style>